<template>
    <div class="setting-content">
        <span></span>
        <span>
            <setting-outlined v-if="isCustomColumnProp" @click="changeModalVisibility(true)" />
        </span>
    </div>
    <div class="table-column-check-all">
        <a-modal
            ok-text="确定"
            cancel-text="取消"
            :visible="showModel"
            :width="800"
            title="自定义列设置"
            wrap-class-name="table-column-check-all-modal"
            @cancel="changeModalVisibility(false)"
            @ok="handleSubmitConditions"
        >
            <div class="check-all">
                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                    全选
                </a-checkbox>
            </div>
            <a-checkbox-group v-model:value="checkedList" :options="columnplainOptions" @change="onChange" />
        </a-modal>
    </div>
</template>
<script>
    import { isEmptyArr } from '@/utils/index'
    import { computed, defineComponent, ref } from 'vue'
    export default defineComponent({
        name: 'CustomTableColumn',
        props: {
            //自定义列
            isCustomColumn: {
                type: Boolean
            },
            //复选框
            openCheckBox: {
                type: Boolean
            },
            //列数据
            plainOptions: {
                type: Array
            }
        },
        emits: ['filter'],
        setup(props, { emit }) {
            const isCustomColumnProp = computed(() => {
                return props.isCustomColumn
            })
            const indeterminate = ref(false)
            const checkedList = ref([])
            const showModel = ref(false)
            const checkAll = ref(false)
            const changeModalVisibility = (visible = false) => {
                showModel.value = visible
            }
            const columnplainOptions = computed(() => {
                const options = []
                const noCloumn = ['sequenceNumber', 'operation']
                props.plainOptions.map(item => {
                    if (!noCloumn.includes(item.dataIndex)) {
                        options.push(...getChildList(item))
                    }
                })
                return options
            })
            const getChildList = item => {
                const options = []
                if (item.children && item.children.length > 0) {
                    //有子级显示子级
                    options.push(
                        ...item.children.map(info => {
                            return {
                                label: info.title,
                                value: info.dataIndex
                            }
                        })
                    )
                } else {
                    //无子级显示自己
                    options.push({ label: item.title, value: item.dataIndex })
                }
                return options
            }
            const onCheckAllChange = event => {
                const { checked } = event.target
                checkedList.value = checked ? columnplainOptions.value.map(option => option.value) : []
                indeterminate.value = false
                checkAll.value = checked
            }
            const handleSubmitConditions = () => {
                const checkColumnList = columnplainOptions.value
                    .filter(item => checkedList.value.includes(item.value))
                    .map(item => ({
                        key: item.value,
                        name: item.value,
                        description: item.label
                    }))
                emit('filter', checkColumnList)
                showModel.value = false
            }
            const onChange = () => {
                indeterminate.value =
                    !isEmptyArr(checkedList.value) && checkedList.value.length < columnplainOptions.value.length
                checkAll.value = checkedList.value.length === columnplainOptions.value.length
            }
            return {
                changeModalVisibility,
                handleSubmitConditions,
                showModel,
                indeterminate,
                columnplainOptions,
                onChange,
                isCustomColumnProp,
                onCheckAllChange,
                checkAll,
                checkedList
            }
        }
    })
</script>
<style lang="less" scoped>
    .setting-content {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .table-column-check-all-modal .check-all {
        margin-bottom: 10px;
    }

    .table-column-check-all-modal .@{ant-prefix}-checkbox-group {
        display: flex;
        flex-wrap: wrap;
    }
    .table-column-check-all-modal :deep(.@{ant-prefix}-checkbox-group-item) {
        width: 20%;
        margin-right: 0;
        margin-bottom: 5px;
    }
</style>
